//路由设置
// 1. 引入组件
// 导入Element Plus组件库中的tree-select-option组件
import component from "element-plus/es/components/tree-select/src/tree-select-option.mjs";
// 从vue-router库中导入三个核心函数：创建HTML5模式的路由历史，创建路由实例，创建哈希模式的路由历史
import { createWebHistory, createRouter, createWebHashHistory } from "vue-router";
// import Index from '../Index.vue'

// 2. 定义路由（路径与组件之间的映射）
const routes = [
    // 后台管理员 ： 定义路由配置数组，用于存放所有路由规则
    // 定义登录路由规则：路径名称，用于编程式导航；URL路径；使用动态导入方式加载Login组件，实现代码分割和懒加载
    {name:'login',path:'/login',component:()=>import('@/components/Login.vue')},
    // 定义首页路由规则，这是一个嵌套路由
    {name:'index',path:'/',component:()=>import('@/components/Index.vue'),children:[
        // 嵌套路由配置，实现“管理与列表”页面的路由映射。
        {name:'coach', path:'/coach', component:()=>import('@/components/Coach.vue')},
        // 浏览器地址栏为/admin时，会匹配到该路由。子路由的内容会渲染到父组件（Index.vue）中 <router-view> 位置，而不是替换整个页面。
        // component: () => import(...)：懒加载方式导入Admin.vue组件，当访问该路由时才会加载对应的组件代码， Admin.vue 组件会在Index组件的<router-view>中显示
        // 动态导入 () => import(...) ：将 Admin.vue 组件打包成单独的JS文件，只有在访问/admin路径时才会加载该文件，减少初始加载时间
        {name:'admin', path:'/admin', component:()=>import('@/components/Admin.vue')},
        {name:'member', path:'/member', component:()=>import('@/components/Member.vue')},
        {name:'course', path:'/course', component:()=>import('@/components/Course.vue')},
        {name:'courseCalendar', path:'/courseCalendar', component:()=>import('@/components/CourseCalendar.vue')},//不区分大小写？
        {name:'reserve', path:'/reserve', component:()=>import('@/components/Reserve.vue')},
        {name:'charts', path:'/charts', component:()=>import('@/components/Charts.vue')}
    ]}
];
// 3. 创建路由实例
const router = createRouter({
    // history: createWebHashHistory(), 
    history: createWebHistory(), // 历史记录// 配置路由的历史模式为哈希模式，兼容性好，不需要后端额外配置
    routes:routes // routes数组配置到路由实例中
})

// 给路由实例添加一个自定义属性，标记load路由是否加载
router.load = false;

// 4. 对外提供路由
export default router //导出路由实例，供 Vue 应用使用，通常会在main.js中通过app.use(router)来安装路由
